<template>
  <div class="quill-editor-container">
    <!-- 编辑器头部 -->
    <div class="editor-header">
      <h3>Quill 富文本编辑器</h3>
      <div class="editor-actions">
        <!-- 背景颜色选择器 -->
        <div class="background-color-selector">
          <el-tooltip content="设置编辑器背景颜色" placement="bottom">
            <div class="color-picker-wrapper">
              <label>背景颜色:</label>
              <el-color-picker 
                v-model="editorBackgroundColor" 
                size="small"
                show-alpha
                :predefine="backgroundColorPresets"
                @change="handleBackgroundColorChange"
              />
              <el-button 
                size="small" 
                @click="resetBackgroundColor"
                style="margin-left: 5px;"
              >
                重置
              </el-button>
            </div>
          </el-tooltip>
        </div>

        <div class="code-block-theme-selector">
          <el-tooltip content="请先选中一个代码块，然后选择要应用的主题样式" placement="bottom">
            <div class="custom-select" @mousedown.prevent.stop>
              <el-button 
                size="small" 
                style="width: 160px; margin-right: 10px;"
                @click.prevent.stop="toggleThemeDropdown"
              >
                {{ getSelectedThemeLabel() }}
                <el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
              </el-button>
              <div v-if="showThemeDropdown" class="theme-dropdown" @mousedown.prevent.stop>
                <div 
                  v-for="option in themeOptions" 
                  :key="option.value"
                  class="theme-option"
                  @click.prevent.stop="selectTheme(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </el-tooltip>
          <el-tooltip content="查看当前选中代码块的主题" placement="bottom">
            <el-button 
              @click="showCurrentCodeBlockTheme" 
              @mousedown.stop
              @focus.stop
              size="small" 
              style="margin-right: 10px;"
            >
              <el-icon><InfoFilled /></el-icon>
              查看主题
            </el-button>
          </el-tooltip>
        </div>
        <el-button @click="saveContent" type="success" size="small">
          <el-icon><Check /></el-icon>
          保存内容
        </el-button>
        <el-button @click="clearContent" type="danger" size="small">
          <el-icon><Delete /></el-icon>
          清空内容
        </el-button>
      </div>
    </div>

    <!-- 编辑器主体 -->
    <div class="editor-body single-view">
      <!-- 单栏模式 - 编辑区 -->
      <div class="editor-pane">
        <div class="pane-header">编辑区</div>
        <!-- 富文本编辑模式 -->
        <div class="editor-mode">
          <VueQuill
             ref="quillEditor"
             v-model:content="content"
             :options="editorOptions"
             content-type="html"
             @textChange="handleTextChange"
             @selectionChange="handleSelectionChange"
             class="quill-editor"
             :style="{ height: (typeof height === 'number' ? height : parseInt(height)) + 'px' }"
           />
          
          <!-- 图片编辑工具栏 -->
          <div v-if="selectedImage" class="image-edit-panel">
            <div class="image-edit-buttons">
              <el-button-group>
                <el-button size="small" @click="alignSelectedImage('left')" title="居左对齐">
                  <el-icon><ArrowLeft /></el-icon>
                </el-button>
                <el-button size="small" @click="alignSelectedImage('center')" title="居中对齐">
                  <el-icon><Minus /></el-icon>
                </el-button>
                <el-button size="small" @click="alignSelectedImage('right')" title="居右对齐">
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </el-button-group>
              
              <el-button-group style="margin-left: 10px;">
                <el-button size="small" @click="scaleSelectedImage(1.2)" title="放大图片">
                  <el-icon><Plus /></el-icon>
                </el-button>
                <el-button size="small" @click="scaleSelectedImage(0.8)" title="缩小图片">
                  <el-icon><Minus /></el-icon>
                </el-button>
                <el-button size="small" @click="resetSelectedImageSize" title="重置大小">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </el-button-group>
              
              <el-button size="small" type="danger" @click="deleteSelectedImage" title="删除图片" style="margin-left: 10px;">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑器底部信息 -->
    <div class="editor-footer">
      <div class="editor-stats">
        <span>字符数: {{ characterCount }}</span>
        <span>单词数: {{ wordCount }}</span>
        <span>最后保存: {{ lastSaved || '未保存' }}</span>
      </div>
    </div>

    <!-- 保存结果提示 -->
    <div v-if="savedContent" class="save-result">
      <h4>保存的内容:</h4>
      <pre>{{ savedContent }}</pre>
    </div>
  </div>
</template>

<script>
import { QuillEditor as VueQuill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Check, Delete, InfoFilled, ArrowDown, ArrowLeft, ArrowRight, Plus, Minus, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'QuillEditor',
  components: {
    VueQuill,
    Check,
    Delete,
    InfoFilled,
    ArrowDown,
    ArrowLeft,
    ArrowRight,
    Plus,
    Minus,
    Refresh
  },
    props: {
      // 模型值，用于v-model双向绑定
      modelValue: {
        type: [String, Object],
        default: ''
      },
    /**
     * 是否为新建模式，新建模式下空内容会显示默认内容
     */
    isNewMode: {
      type: Boolean,
      default: false
    },
    /**
     * 编辑器高度
     */
    height: {
      type: [Number, String],
      default: 400
    },
    /**
     * 占位符文本
     */
    placeholder: {
      type: String,
      default: '请输入内容...'
    }
  },
  emits: ['update:modelValue', 'save'],
  data() {
    return {
      content: '<p><br></p>',
      characterCount: 0,
      wordCount: 0,
      lastSaved: null,
      savedContent: '',
      selectedCodeBlockStyle: 'default',
      currentCodeBlockStyle: 'default',
      codeBlockObserver: null,
      showThemeDropdown: false,
      selectedImage: null,
      // 背景颜色相关
      editorBackgroundColor: '#ffffff',
      backgroundColorPresets: [
        '#ffffff', // 纯白
        '#f8f9fa', // 浅灰
        '#f0f8ff', // 爱丽丝蓝
        '#f5f5dc', // 米色
        '#fdf6e3', // 暖白
        '#fff8dc', // 玉米丝色
        '#f0fff0', // 蜜瓜色
        '#f5fffa', // 薄荷奶油
        '#fffacd', // 柠檬绸
        '#e6f3ff', // 淡蓝
        '#f0f8e6', // 淡绿
        '#fff0f5'  // 薰衣草腮红
      ],
      themeOptions: [
        { label: '默认样式', value: 'default' },
        { label: '暗色主题', value: 'dark' },
        { label: 'GitHub风格', value: 'github' },
        { label: 'VS Code风格', value: 'vscode' },
        { label: '终端风格', value: 'terminal' },
        { label: '简约风格', value: 'minimal' },
        { label: '彩色边框', value: 'colorful' },
        { label: '渐变背景', value: 'gradient' },
        { label: '💡 提示信息', value: 'tip' },
        { label: '⚠️ 警告提醒', value: 'warning' },
        { label: 'ℹ️ 重要信息', value: 'info' },
        { label: '✅ 成功提示', value: 'success' },
        { label: '❌ 错误提示', value: 'error' },
        { label: '📝 笔记备注', value: 'note' },
        { label: '🎨 现代简约', value: 'modern' },
        { label: '🌊 深海蓝调', value: 'ocean' },
        { label: '🌸 温柔粉调', value: 'sakura' },
        { label: '🌙 优雅夜色', value: 'night' },
        { label: '🍃 清新绿意', value: 'forest' },
        { label: '☀️ 温暖橙调', value: 'sunshine' },
        { label: '💎 高端商务', value: 'business' },
        { label: '🎯 专业焦点', value: 'focus' },
        { label: '📚 学术风格', value: 'academic' },
        { label: '🔥 活力橙红', value: 'fire' },
        { label: '⚡ 科技蓝光', value: 'tech' },
        { label: '🌈 彩虹渐变', value: 'rainbow' },
        { label: '🏔️ 冰雪白净', value: 'glacier' },
        { label: '🌌 星空深邃', value: 'starry' },
        { label: '🎭 复古怀旧', value: 'vintage' },
        { label: '🤖 未来科幻', value: 'futuristic' }
      ],
      editorOptions: {
        theme: 'snow',
        placeholder: '请输入内容...',
        modules: {
          toolbar: [
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'align': [] }],
            ['blockquote', 'code-block'],
            ['link', 'image', 'video'],
            ['clean']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: true
          }
        }
      }
    }
  },
  computed: {
    // 移除了renderedContent计算属性，因为不再需要预览区
  },
  watch: {
    /**
     * 监听外部传入的modelValue变化
     */
    modelValue: {
       handler(newVal) {
         // 检查是否为JSON格式的富文本数据
         let processedContent = newVal || ''
         
         // 如果内容不为空，尝试解析JSON格式
         if (processedContent && typeof processedContent === 'string') {
           try {
             const parsed = JSON.parse(processedContent)
             if (parsed && typeof parsed === 'object' && parsed.html) {
               processedContent = parsed.html
             }
           } catch (e) {
             // 不是JSON格式，直接使用原内容
           }
         } else if (newVal && typeof newVal === 'object') {
           // 如果是对象，尝试获取html属性
           processedContent = newVal.html || JSON.stringify(newVal);
         }
         
         // 只有当处理后的内容与当前内容不同时才更新，避免循环更新
         if (processedContent !== this.content) {
           // 暂时禁用content监听器，避免循环触发
           this._isUpdatingFromModelValue = true
           this.content = processedContent;
           
           // 在下一个tick中重新启用content监听器
           this.$nextTick(() => {
             this._isUpdatingFromModelValue = false
           })
         }
       },
        immediate: true
      },
    /**
     * 监听内部content变化，同步到外部
     */
    content: {
      handler(newVal) {
        // 如果是从modelValue更新触发的，不要再次emit，避免循环
        if (this._isUpdatingFromModelValue) {
          this.updateStats()
          this.savedContent = newVal
          return
        }
        
        this.updateStats()
        this.savedContent = newVal
        // 触发v-model更新
        this.$emit('update:modelValue', newVal)
      },
      immediate: false
    },
    selectedCodeBlockStyle: {
      handler(newStyle) {
        // 当用户选择新的代码块样式时，应用到所有代码块
        this.$nextTick(() => {
          this.applyCodeBlockStyle(newStyle)
        })
      },
      immediate: true
    }
  },
  created() {
    // 初始化标志，防止循环更新
    this._isUpdatingFromModelValue = false
    
    // 在组件创建时初始化内容
    // 处理可能的JSON格式内容
    let processedContent = this.modelValue || ''
    
    // 如果内容不为空，尝试解析JSON格式
    if (processedContent && typeof processedContent === 'string') {
      try {
        const parsed = JSON.parse(processedContent)
        if (parsed && typeof parsed === 'object' && parsed.html) {
          processedContent = parsed.html
        }
      } catch (e) {
        // 不是JSON格式，直接使用原内容
      }
    } else if (this.modelValue && typeof this.modelValue === 'object') {
      // 如果是对象，尝试获取html属性
      processedContent = this.modelValue.html || JSON.stringify(this.modelValue);
    }
    
    // 设置初始内容，避免触发watch
    this._isUpdatingFromModelValue = true
    this.content = processedContent;
    // QuillEditor 组件已创建
    
    // 在下一个tick中重新启用监听器
    this.$nextTick(() => {
      this._isUpdatingFromModelValue = false
    })
  },
  
  mounted() {
    // 更新编辑器选项中的placeholder
    this.editorOptions.placeholder = this.placeholder
    
    this.setupKeyboardShortcuts()
    this.setupCodeBlockHandler()
    this.setupImageClickHandler()
    
    // 添加全局点击事件监听器，用于关闭下拉菜单
    document.addEventListener('click', this.handleGlobalClick)
    
    // 等待VueQuill组件完全初始化
    this.$nextTick(() => {
      this.waitForQuillReady()
    })
  },

  beforeUnmount() {
    // 移除全局点击事件监听器
    document.removeEventListener('click', this.handleGlobalClick)
    
    // 移除键盘事件监听器
    if (this._keydownHandler) {
      document.removeEventListener('keydown', this._keydownHandler)
      this._keydownHandler = null
    }
    
    // 清理 MutationObserver
    if (this.codeBlockObserver) {
      this.codeBlockObserver.disconnect()
      this.codeBlockObserver = null
    }
    
    // 清理 Quill 编辑器事件监听器
    try {
      if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
        const quill = this.$refs.quillEditor.getQuill();
        if (quill && quill.emitter && quill.emitter.off) {
          // 移除自定义的文本变化事件监听器
          if (this._quillTextChangeHandler) {
            quill.emitter.off('text-change', this._quillTextChangeHandler)
            this._quillTextChangeHandler = null
          }
          
          // 移除其他事件监听器
          quill.off('text-change')
          quill.off('selection-change')
        }
      }
    } catch (error) {
      // 清理 Quill 事件监听器时出错
    }
  },

  methods: {
    /**
     * 解析包含背景色的div内容
     * @param {string} htmlContent - 包含div的HTML内容
     * @returns {object} 解析结果，包含内容和样式信息
     */
    parseContentWithBackground(htmlContent) {
      if (!htmlContent || typeof htmlContent !== 'string') {
        return { content: '', backgroundColor: null }
      }
      
      // 创建临时DOM元素来解析HTML
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = htmlContent
      
      // 查找第一个div元素
      const divElement = tempDiv.querySelector('div')
      if (divElement) {
        // 提取背景色样式
        const style = divElement.getAttribute('style') || ''
        const backgroundColorMatch = style.match(/background-color:\s*([^;]+)/)
        const backgroundColor = backgroundColorMatch ? backgroundColorMatch[1].trim() : null
        
        // 提取div内的内容
        const innerContent = divElement.innerHTML || '<p><br></p>'
        
        return {
          content: innerContent,
          backgroundColor: backgroundColor
        }
      }
      
      // 如果没有找到div，返回原内容
      return {
        content: htmlContent,
        backgroundColor: null
      }
    },
    
    /**
     * 等待Quill编辑器完全准备就绪
     */
    waitForQuillReady() {
      let attempts = 0
      const maxAttempts = 50 // 最多等待5秒
      
      const checkQuill = () => {
        try {
          if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
            const quill = this.$refs.quillEditor.getQuill()
            
            // 更严格的检查，确保所有必要的属性都存在
            if (quill && 
                quill.root && 
                quill.emitter && 
                quill.emitter.on && 
                quill.emitter.off && 
                typeof quill.getSelection === 'function' &&
                typeof quill.getContents === 'function') {
              
              // Quill编辑器已准备就绪，执行初始化操作

              setTimeout(() => {
                try {
                  // 确保内容正确显示
                  if (this.content && this.content.trim() !== '') {

                    this.$nextTick(() => {
                      try {
                        // 检查编辑器内容是否正确显示
                        const currentHTML = quill.root.innerHTML.trim();
                        const expectedContent = this.content.trim();
                        
                        // 只有在编辑器完全为空或只有默认空段落时才强制更新
                        const isEmpty = currentHTML === '' || 
                                      currentHTML === '<p><br></p>' || 
                                      currentHTML === '<p></p>';
                        
                        // 如果编辑器为空但应该有内容，则设置内容
                        if (isEmpty && expectedContent && expectedContent !== '<p><br></p>') {
                          // 解析内容，提取背景色和实际内容
                          const parsed = this.parseContentWithBackground(expectedContent);
                          
                          // 设置编辑器内容
                          try {
                            if (parsed.content) {
                              quill.root.innerHTML = parsed.content;
                              quill.update('silent');
                            }
                            
                            // 如果有背景色，应用到编辑器容器
                            if (parsed.backgroundColor) {
                              this.editorBackgroundColor = parsed.backgroundColor;
                              this.$nextTick(() => {
                                this.applyBackgroundColor(parsed.backgroundColor);
                              });
                            }
                          } catch (error) {
                            // 设置内容失败，尝试备用方法
                            // 备用方法：使用dangerouslyPasteHTML
                            if (quill && quill.clipboard && quill.clipboard.dangerouslyPasteHTML) {
                              quill.clipboard.dangerouslyPasteHTML(parsed.content || expectedContent);
                            }
                          }
                        } else if (!expectedContent || expectedContent === '') {
                          // 如果期望内容为空，确保编辑器至少有一个空段落
                          if (isEmpty) {
                            quill.root.innerHTML = '<p><br></p>';
                          }
                        }
                      } catch (contentError) {
                        console.warn('QuillEditor: 设置内容时出错:', String(contentError?.message || contentError))
                        // 降级处理：直接设置innerHTML
                        try {
                          if (this.content && this.content.trim() !== '') {
                            quill.root.innerHTML = this.content;
                          }
                        } catch (fallbackError) {
                          console.warn('QuillEditor: 降级设置内容也失败:', String(fallbackError?.message || fallbackError))
                        }
                      }
                    })
                  }
                  
                  // 延迟应用样式，避免与内容设置冲突
                  setTimeout(() => {
                    try {
                      this.applyCodeBlockStyle(this.selectedCodeBlockStyle);
                      this.observeCodeBlocks();
                      this.applyBackgroundColor(this.editorBackgroundColor);
                    } catch (styleError) {
                      console.warn('QuillEditor: 应用样式时出错:', String(styleError?.message || styleError))
                    }
                  }, 50)
                } catch (initError) {
                  // Quill编辑器初始化操作失败
                }
              }, 150) // 增加延迟确保完全初始化
              return
            }
          }
          
          attempts++;
          if (attempts < maxAttempts) {
            // 如果Quill还没准备好，继续等待
            setTimeout(checkQuill, 100)
          } else {
            // Quill编辑器初始化超时，尝试基本初始化
            // 超时后尝试基本初始化
            try {
              if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
                const quill = this.$refs.quillEditor.getQuill()
                if (quill && quill.root) {
                  this.applyBackgroundColor(this.editorBackgroundColor)
                }
              }
            } catch (fallbackError) {
              // 基本初始化也失败
            }
          }
        } catch (error) {
          // Quill编辑器初始化错误
          attempts++
          if (attempts < maxAttempts) {
            setTimeout(checkQuill, 100)
          }
        }
      }
      
      checkQuill();
    },
    /**
     * 获取默认内容
     * @returns {string} 默认的HTML内容
     */
    getDefaultContent() {
      return '<h2>欢迎使用 Quill 富文本编辑器</h2><p><br></p><p>这是一个功能强大的富文本编辑器，支持丰富的格式化选项。</p><p><br></p><h3>代码块功能演示</h3><p>使用上方的样式下拉框来应用不同的代码块风格。</p><p><br></p><h3>支持的特性</h3><ul><li><strong>丰富的格式化选项</strong> - 支持标题、字体、颜色等</li><li><em>多媒体支持</em> - 可以插入图片、视频、链接</li><li><u>代码块功能</u> - 支持8种精美的代码块样式风格</li><li>列表和引用功能</li></ul>'
    },

    /**
     * 处理文本变化事件
     */
    handleTextChange() {
      try {
        // 检查是否为特殊内容格式
        if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
          const quill = this.$refs.quillEditor.getQuill();
          if (quill && quill.root) {
            const currentHTML = quill.root.innerHTML.trim();
            if (currentHTML === '<p>...</p>') {
              // 修复特殊内容格式
              quill.root.innerHTML = '<p><br></p>';
            }
          }
        }
        this.updateStats();
        // 强制更新按钮文本以反映当前选中的代码块主题
        this.$forceUpdate();
      } catch (error) {
        // 处理文本变化事件时出错
      }
    },

    /**
     * 处理光标位置变化事件
     */
    handleSelectionChange() {
      try {
        // 当光标位置改变时，强制更新按钮文本以反映当前选中的代码块主题
        this.$forceUpdate()
        
        // 检测是否选中了图片
        this.checkImageSelection()
      } catch (error) {
        // 处理光标位置变化事件时出错
      }
    },



    /**
     * 更新统计信息
     */
    updateStats() {
      try {
        let text = ''
        
        if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
          // 富文本模式：从Quill编辑器获取纯文本
          const quill = this.$refs.quillEditor.getQuill()
          if (quill && quill.getText) {
            text = quill.getText()
            this.characterCount = text.length - 1 // 减去末尾的换行符
            this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0
          }
        } else {
          // 从HTML内容中提取文本进行统计
          const tempDiv = document.createElement('div')
          tempDiv.innerHTML = this.content
          text = tempDiv.textContent || tempDiv.innerText || ''
          this.characterCount = text.length
          this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0
        }
      } catch (error) {
        // 更新统计信息时出错
        this.characterCount = 0
        this.wordCount = 0
      }
    },



    /**
     * 保存内容
     */
    saveContent() {
      try {
        let htmlContent = ''
        let textContent = ''
        let delta = null
        
        if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
          // 富文本模式 - 使用getContent方法获取处理后的内容
          const contentData = this.getContent()
          htmlContent = contentData.html
          textContent = contentData.text
          delta = contentData.delta
        } else {
          // 从HTML内容中提取文本
          htmlContent = this.content
          const tempDiv = document.createElement('div')
          tempDiv.innerHTML = htmlContent
          textContent = tempDiv.textContent || tempDiv.innerText || ''
        }
        
        this.savedContent = JSON.stringify({
          html: htmlContent,
          text: textContent,
          delta: delta,
          mode: 'html'
        }, null, 2);
        
        this.lastSaved = new Date().toLocaleString()
        
        this.$message.success('内容已保存！')
        
        // 触发save事件，让父组件处理保存逻辑
        this.$emit('save', {
          html: htmlContent,
          text: textContent,
          delta: delta,
          mode: 'html'
        })
      } catch (error) {
        // 保存内容时出错
        this.$message.error('保存内容时出现错误')
      }
    },

    /**
     * 清空内容
     */
    clearContent() {
      this.$confirm('确定要清空所有内容吗？', '确认清空', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          this.content = ''
          if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
            const quill = this.$refs.quillEditor.getQuill()
            if (quill && quill.setContents) {
              quill.setContents([])
            }
          }
          this.updateStats();
          this.$message.success('内容已清空');
        } catch (error) {
          // 清空内容时出错
          this.$message.error('清空内容时出现错误')
        }
      }).catch(() => {
        this.$message.info('已取消清空')
      })
    },

    /**
     * 设置键盘快捷键
     */
    setupKeyboardShortcuts() {
      // 保存this引用
      const self = this
      
      // 定义键盘事件处理函数
      const handleKeydown = (e) => {
        if (e.ctrlKey && e.key === 's') {
          e.preventDefault()
          self.saveContent()
        }
        // Ctrl+Shift+C 清空内容
        if (e.ctrlKey && e.shiftKey && e.key === 'C') {
          e.preventDefault()
          self.clearContent()
        }
        // Ctrl+Enter 跳出代码块
        if (e.ctrlKey && e.key === 'Enter') {
          e.preventDefault()
          self.exitCodeBlock()
        }
        // BackSpace 键特殊处理，防止代码块样式丢失
        if (e.key === 'Backspace') {
          self.handleBackspaceInEditor(e)
        }
      }
      
      // 添加事件监听器
      document.addEventListener('keydown', handleKeydown)
      
      // 保存事件处理函数引用，用于组件销毁时移除
      this._keydownHandler = handleKeydown
    },

    /**
     * 设置图片点击处理器
     */
    setupImageClickHandler() {
      this.$nextTick(() => {
        setTimeout(() => {
          try {
            if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
              const quill = this.$refs.quillEditor.getQuill()
              
              if (quill && quill.root) {
                // 监听编辑器内的点击事件
                quill.root.addEventListener('click', (event) => {
                  if (event.target.tagName === 'IMG') {
                    // 点击图片时选中它
                    this.selectedImage = event.target
            
                    
                    // 添加选中样式
                    const allImages = quill.root.querySelectorAll('img')
                    allImages.forEach(img => img.classList.remove('selected'))
                    event.target.classList.add('selected')
                    
                    // 设置光标位置到图片
                    const blot = quill.constructor.find(event.target)
                    if (blot) {
                      const imgIndex = quill.getIndex(blot)
                      quill.setSelection(imgIndex, 1)
                    }
                  } else {
                    // 点击其他地方时取消图片选中
                    this.selectedImage = null
            
                    const allImages = quill.root.querySelectorAll('img')
                    allImages.forEach(img => img.classList.remove('selected'))
                  }
                })
              }
            }
          } catch (error) {
            // 设置图片点击处理器时出错
          }
        }, 300)
      })
    },

    /**
     * 设置代码块处理器
     */
    setupCodeBlockHandler() {
      this.$nextTick(() => {
        setTimeout(() => {
          try {
            if (this.$refs.quillEditor && this.$refs.quillEditor.getQuill) {
              const quill = this.$refs.quillEditor.getQuill()
              
              if (quill && quill.root) {
                // 监听工具栏代码块按钮点击
                const toolbar = quill.getModule('toolbar')
                if (toolbar) {
                  // 自定义代码块格式处理
                  quill.on('selection-change', (range) => {
                    if (range) {
                      this.handleCodeBlockSelection(quill, range)
                    }
                  })
                }
              }
            }
          } catch (error) {
          }
        }, 300) // 稍短的延迟
      })
    },

    /**
     * 处理代码块选择
     */
    handleCodeBlockSelection(quill, range) {
      const format = quill.getFormat(range)
      if (format['code-block']) {
        // 如果当前选中的是代码块，可以在这里添加语言选择逻辑
      }
    },



    /**
     * 应用代码块样式（选择性应用）
     */
    applyCodeBlockStyle(style) {
      // 设置默认样式变量，用于新创建的代码块
      this.currentCodeBlockStyle = style
      
      this.$nextTick(() => {
        // 获取当前选中的代码块
        const selectedCodeBlock = this.getSelectedCodeBlock()
        
        if (selectedCodeBlock) {
          // 只对选中的代码块应用样式
          this.applyStyleToCodeBlock(selectedCodeBlock, style)
          this.$message.success(`已为选中代码块应用${this.getStyleDisplayName(style)}主题`)
        } else {
          // 如果没有选中代码块，提示用户
          this.$message.warning('请先将光标放在代码块中，然后选择要应用的主题样式')
        }
      })
    },

    /**
     * 获取当前选中的代码块
     */
    getSelectedCodeBlock() {
      try {
        if (!this.$refs.quillEditor) {
          return null;
        }
        
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) {
          return null
        }
        
        const selection = quill.getSelection();
        if (!selection) {
          return null
        }
        
        const format = quill.getFormat(selection.index, selection.length);
        if (!format['code-block']) {
          return null
        }
        
        // 获取选中位置对应的DOM元素
        const [leaf] = quill.getLeaf(selection.index)
        if (!leaf || !leaf.parent) {
          return null
        }
        
        // 从leaf的parent开始查找代码块元素
        let codeBlock = leaf.parent.domNode
        let level = 0
        
        while (codeBlock && codeBlock.classList && 
               !codeBlock.classList.contains('ql-syntax') && 
               !codeBlock.classList.contains('ql-code-block')) {
          codeBlock = codeBlock.parentElement
          level++
          if (level > 10) {
            break
          }
        }
        
        // 确保找到的是有效的代码块元素
        if (codeBlock && codeBlock.classList && 
            (codeBlock.classList.contains('ql-syntax') || codeBlock.classList.contains('ql-code-block'))) {
          return codeBlock;
        }
        
        return null;
      } catch (error) {
        // 获取代码块时出错
        return null
      }
    },

    /**
     * 为指定代码块应用样式
     */
    applyStyleToCodeBlock(codeBlock, style) {
      if (codeBlock) {
        // 移除所有可能的样式类
        const allThemeClasses = [
          'code-default', 'code-dark', 'code-github', 'code-vscode', 'code-terminal', 'code-minimal', 
          'code-colorful', 'code-gradient', 'code-tip', 'code-warning', 'code-info', 'code-success', 
          'code-error', 'code-note', 'code-modern', 'code-ocean', 'code-sakura', 'code-night', 
          'code-forest', 'code-sunshine', 'code-business', 'code-focus', 'code-academic', 
          'code-fire', 'code-tech', 'code-rainbow', 'code-glacier', 'code-starry', 
           'code-vintage', 'code-futuristic', 'code-diamond'
        ]
        codeBlock.classList.remove(...allThemeClasses)
        
        // 添加新的样式类
        codeBlock.classList.add(`code-${style}`)
        // 存储样式信息到数据属性
        codeBlock.setAttribute('data-theme', style)
        
  
      }
    },

    /**
     * 获取样式的显示名称
     */
    getStyleDisplayName(style) {
      const styleNames = {
        'default': '默认样式',
        'dark': '暗色主题',
        'github': 'GitHub风格',
        'vscode': 'VS Code风格',
        'terminal': '终端风格',
        'minimal': '简约风格',
        'colorful': '彩色边框',
        'gradient': '渐变背景'
      }
      return styleNames[style] || style;
    },

    /**
     * 处理背景颜色变化
     * @param {string} color - 新的背景颜色值
     */
    handleBackgroundColorChange(color) {
      this.editorBackgroundColor = color
      this.applyBackgroundColor(color)
      this.$message.success('编辑器背景颜色已更新')
    },

    /**
     * 应用背景颜色到编辑器
     * @param {string} color - 背景颜色值
     */
    applyBackgroundColor(color) {
      // 添加防护措施，确保组件已挂载且编辑器已初始化
      if (!this.$el || !color) {
        return
      }
      
      this.$nextTick(() => {
        try {
          // 等待Quill编辑器完全初始化
          const checkAndApply = () => {
            const editorContainer = this.$el.querySelector('.ql-editor')
            const quillContainer = this.$el.querySelector('.ql-container')
            
            // 确保编辑器容器存在
            if (editorContainer) {
              editorContainer.style.backgroundColor = color
              // 已应用背景颜色到编辑器容器
            }
            
            // 同时设置整个编辑器容器的背景色
            if (quillContainer) {
              quillContainer.style.backgroundColor = color
            }
            
            // 如果编辑器还没有完全初始化，稍后重试
            if (!editorContainer && this.$refs.quillEditor) {
              setTimeout(checkAndApply, 100)
            }
          }
          
          checkAndApply()
        } catch (error) {
          console.warn('QuillEditor: 应用背景颜色时出错:', String(error?.message || error))
        }
      })
    },

    /**
     * 重置背景颜色为默认白色
     */
    resetBackgroundColor() {
      this.editorBackgroundColor = '#ffffff'
      this.applyBackgroundColor('#ffffff')
      this.$message.success('背景颜色已重置为默认白色')
    },

    /**
     * 处理代码块样式变化
     */
    handleCodeBlockStyleChange(newStyle) {
      // 立即重新聚焦到编辑器
      this.$nextTick(() => {
        if (this.$refs.quillEditor && this.$refs.quillEditor.quill) {
          this.$refs.quillEditor.quill.focus()
        }
      })
      
      this.applyCodeBlockStyle(newStyle)
      
      // 再次确保编辑器获得焦点
      setTimeout(() => {
        if (this.$refs.quillEditor && this.$refs.quillEditor.quill) {
          this.$refs.quillEditor.quill.focus()
        }
      }, 50)
    },

    /**
     * 获取当前选中代码块的主题
     */
    getCurrentCodeBlockTheme() {
      const selectedCodeBlock = this.getSelectedCodeBlock()
      if (selectedCodeBlock) {
        const theme = selectedCodeBlock.getAttribute('data-theme')
        if (theme) {
          return theme
        }
        // 如果没有data-theme属性，通过class判断
        const classList = selectedCodeBlock.classList
        for (let className of classList) {
          if (className.startsWith('code-')) {
            return className.replace('code-', '')
          }
        }
      }
      return null
    },

    /**
     * 显示当前代码块主题信息
     */
    showCurrentCodeBlockTheme() {
      const theme = this.getCurrentCodeBlockTheme()
      if (theme) {
        this.$message.info(`当前代码块主题：${this.getStyleDisplayName(theme)}`)
      } else {
        this.$message.warning('请先选中一个代码块')
      }
    },

    /**
     * 切换主题下拉菜单显示状态
     */
    toggleThemeDropdown() {
      this.showThemeDropdown = !this.showThemeDropdown
    },

    /**
     * 选择主题
     */
    selectTheme(value) {
      this.selectedCodeBlockStyle = value
      this.showThemeDropdown = false
      this.handleCodeBlockStyleChange(value)
    },

    /**
      * 获取选中主题的显示标签
      */
     getSelectedThemeLabel() {
       // 首先检查当前是否选中了代码块
       const currentTheme = this.getCurrentCodeBlockTheme()
       if (currentTheme) {
         // 如果选中了代码块，显示当前代码块的主题
         const option = this.themeOptions.find(opt => opt.value === currentTheme)
         return option ? option.label : `当前主题: ${currentTheme}`
       } else {
         // 如果没有选中代码块，显示提示信息
         return '为选中代码块选择主题'
       }
     },

     /**
      * 处理全局点击事件，用于关闭下拉菜单
      */
     handleGlobalClick(event) {
       // 检查点击是否在自定义下拉菜单外部
       const customSelect = event.target.closest('.custom-select')
       if (!customSelect && this.showThemeDropdown) {
         this.showThemeDropdown = false
       }
     },

    /**
     * 监听新代码块的创建
     */
    /**
     * 观察代码块变化，使用现代MutationObserver API
     * 避免使用已弃用的DOMNodeInserted事件
     */
    observeCodeBlocks() {
      try {
        // 确保 Quill 实例存在且可用
        const quill = this.$refs.quillEditor && this.$refs.quillEditor.getQuill ? this.$refs.quillEditor.getQuill() : null
        if (!quill || !quill.root || !quill.emitter) {
          return
        }
        
        // 清理之前的观察器
        if (this.codeBlockObserver) {
          this.codeBlockObserver.disconnect()
          this.codeBlockObserver = null
        }
        
        // 处理代码块样式的函数
        const processCodeBlocks = () => {
          try {
            if (!quill || !quill.root) return
            
            const codeBlocks = quill.root.querySelectorAll('.ql-syntax, .ql-code-block')
            
            codeBlocks.forEach(block => {
              try {
                // 检查是否已经有主题样式
                const allThemeClasses = [
                  'code-default', 'code-dark', 'code-github', 'code-vscode', 'code-terminal', 'code-minimal', 
                  'code-colorful', 'code-gradient', 'code-tip', 'code-warning', 'code-info', 'code-success', 
                  'code-error', 'code-note', 'code-modern', 'code-ocean', 'code-sakura', 'code-night', 
                  'code-forest', 'code-sunshine', 'code-business', 'code-focus', 'code-academic', 
                  'code-fire', 'code-tech', 'code-rainbow', 'code-glacier', 'code-starry', 
                   'code-vintage', 'code-futuristic', 'code-diamond'
                ]
                
                const hasTheme = allThemeClasses.some(className => block.classList.contains(className))
                
                if (!hasTheme) {
                  // 为新代码块添加默认样式
                  block.classList.add('code-default')
                  block.setAttribute('data-theme', 'default')
                }
              } catch (blockError) {
                // 处理代码块时出错
              }
            })
          } catch (error) {
            // 处理代码块样式时出错
          }
        }
        
        // 使用现代MutationObserver替代已弃用的DOMNodeInserted事件
        this.codeBlockObserver = new MutationObserver((mutations) => {
          let shouldProcess = false
          
          mutations.forEach((mutation) => {
            // 检查是否有新增的节点包含代码块
            if (mutation.type === 'childList') {
              mutation.addedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                  const element = node
                  if (element.classList && (element.classList.contains('ql-syntax') || element.classList.contains('ql-code-block'))) {
                    shouldProcess = true
                  }
                  // 检查子元素中是否包含代码块
                  if (element.querySelectorAll && element.querySelectorAll('.ql-syntax, .ql-code-block').length > 0) {
                    shouldProcess = true
                  }
                }
              })
            }
          })
          
          if (shouldProcess) {
            // 延迟处理以确保DOM完全更新
            this.$nextTick(() => {
              processCodeBlocks()
            })
          }
        })
        
        // 开始观察Quill编辑器根元素的变化
        this.codeBlockObserver.observe(quill.root, {
          childList: true,
          subtree: true
        })
        
        // 同时监听Quill的文本变化事件作为备用
        const handleTextChange = () => {
          this.$nextTick(() => {
            processCodeBlocks()
          })
        }
        
        if (quill.emitter && quill.emitter.on) {
          quill.emitter.on('text-change', handleTextChange);
          this._quillTextChangeHandler = handleTextChange;
        }
        
        // 初始化现有代码块
        processCodeBlocks();
        
      } catch (error) {
        // 初始化代码块观察器时出错
      }
    },







    /**
     * 插入自定义内容
     */
    insertContent(content) {
      const range = this.quill.getSelection()
      if (range) {
        this.quill.insertText(range.index, content)
      } else {
        this.quill.insertText(0, content)
      }
    },

    /**
     * 获取编辑器内容
     */
    getContent() {
      try {
        // 获取 Quill 实例
        const quill = this.$refs.quillEditor && this.$refs.quillEditor.getQuill ? this.$refs.quillEditor.getQuill() : null
        
        if (!quill || !quill.root || !quill.getText || !quill.getContents) {
          // 无法获取 Quill 实例或实例不完整
          return {
            html: '',
            text: '',
            delta: null
          }
        }
        
        // 获取原始HTML内容
        let htmlContent = quill.root.innerHTML
        
        // 为代码块添加内联样式
        htmlContent = this.addInlineStylesToCodeBlocks(htmlContent)
        
        // 为整个内容添加背景颜色样式
        htmlContent = this.addBackgroundColorToContent(htmlContent)
        
        return {
          html: htmlContent,
          text: quill.getText(),
          delta: quill.getContents()
        }
      } catch (error) {
        // 获取编辑器内容时出错
        return {
          html: '',
          text: '',
          delta: null
        }
      }
    },

    /**
     * 为代码块添加内联样式
     * @param {string} html - 原始HTML内容
     * @returns {string} - 添加了内联样式的HTML内容
     */
    addInlineStylesToCodeBlocks(html) {
      // 创建临时DOM元素来处理HTML
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = html
      
      // 定义代码块主题样式映射
      const themeStyles = {
        'code-default': {
          'background-color': '#f8f8f8',
          'color': '#333333',
          'border': '1px solid #e1e4e8',
          'border-radius': '6px',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'
        },
        'code-dark': {
          'background-color': '#2d3748',
          'color': '#e2e8f0',
          'border': '1px solid #4a5568',
          'border-radius': '6px',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'
        },
        'code-github': {
          'background-color': '#f6f8fa',
          'color': '#24292e',
          'border': '1px solid #d0d7de',
          'border-radius': '6px',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'box-shadow': '0 1px 3px rgba(0, 0, 0, 0.12)'
        },
        'code-vscode': {
          'background-color': '#1e1e1e',
          'color': '#d4d4d4',
          'border-left': '3px solid #007acc',
          'border-radius': '4px',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'Cascadia Code, Fira Code, Consolas, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.3)'
        },
        'code-terminal': {
          'background-color': '#0c0c0c',
          'color': '#00ff41',
          'border': '2px solid #333',
          'border-radius': '0',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'Courier New, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'text-shadow': '0 0 5px #00ff41',
          'box-shadow': 'inset 0 0 10px rgba(0, 255, 65, 0.1)'
        },
        'code-gradient': {
          'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          'color': '#ffffff',
          'border': 'none',
          'border-radius': '12px',
          'padding': '16px',
          'margin': '16px 0',
          'font-family': 'Source Code Pro, monospace',
          'font-size': '14px',
          'line-height': '1.5',
          'overflow-x': 'auto',
          'text-shadow': '0 1px 2px rgba(0, 0, 0, 0.3)',
          'box-shadow': '0 4px 15px rgba(102, 126, 234, 0.4)'
        }
      }
      
      // 查找所有代码块元素
      const codeBlocks = tempDiv.querySelectorAll('.ql-syntax, .ql-code-block, [class*="code-"]')
      
      codeBlocks.forEach(block => {
        // 获取代码块的主题类名
        let theme = null
        
        // 首先从class属性中查找主题
        for (const className of block.classList) {
          if (className.startsWith('code-')) {
            theme = className
            break
          }
        }
        
        // 如果没有找到主题类，检查data-theme属性
        if (!theme) {
          const dataTheme = block.getAttribute('data-theme')
          if (dataTheme) {
            theme = `code-${dataTheme}`
          }
        }
        
        // 如果仍然没有主题，且是代码块，使用默认主题
        if (!theme && (block.classList.contains('ql-syntax') || block.classList.contains('ql-code-block'))) {
          theme = 'code-default'
        }
        
        // 如果找到了主题并且有对应的样式定义
        if (theme && themeStyles[theme]) {
          const styles = themeStyles[theme]
          let styleString = ''
          
          // 将样式对象转换为内联样式字符串
          for (const [property, value] of Object.entries(styles)) {
            styleString += `${property}: ${value}; `
          }
          
          // 清除现有的style属性，避免重复添加样式
          // 只保留非主题相关的样式（如果有的话）
          const existingStyle = block.getAttribute('style') || ''
          const nonThemeStyles = existingStyle.split(';')
            .filter(style => {
              const trimmedStyle = style.trim()
              if (!trimmedStyle) return false
              
              // 过滤掉主题相关的样式属性
              const themeStyleProps = ['background-color', 'background', 'color', 'border', 'border-left', 'border-radius', 
                                     'padding', 'margin', 'font-family', 'font-size', 'line-height', 'overflow-x', 
                                     'box-shadow', 'text-shadow']
              
              const propName = trimmedStyle.split(':')[0]?.trim().toLowerCase()
              return !themeStyleProps.includes(propName)
            })
            .join('; ')
          
          // 设置新的style属性，避免重复
          const finalStyle = nonThemeStyles ? `${nonThemeStyles}; ${styleString}` : styleString
          block.setAttribute('style', finalStyle)
        }
      })
      
      return tempDiv.innerHTML
     },

     /**
      * 为整个内容添加背景颜色样式
      * @param {string} html - 原始HTML内容
      * @returns {string} - 添加了背景颜色的HTML内容
      */
     addBackgroundColorToContent(html) {
       // 如果设置了背景颜色且不是默认白色，则包装内容
       if (this.editorBackgroundColor && this.editorBackgroundColor !== '#ffffff' && this.editorBackgroundColor !== '#FFFFFF') {
         return `<div style="background-color: ${this.editorBackgroundColor}; padding: 20px; border-radius: 8px; min-height: 100vh;">${html}</div>`
       }
       
       return html;
     },
 
     /**
      * 设置编辑器内容
      */
    setContent(content) {
      if (typeof content === 'string') {
        // 处理特殊的内容格式
        if (content === '<p>...</p>' || content === '' || content === '<p></p>') {
          this.quill.root.innerHTML = '<p><br></p>';
        } else {
          // 确保内容不为空，如果是空的或只包含HTML标签但没有实际内容，设置为默认内容
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = content;
          const hasTextContent = tempDiv.textContent.trim().length > 0;
          
          if (!hasTextContent && content.includes('<p>')) {
            this.quill.root.innerHTML = '<p><br></p>';
          } else {
            this.quill.root.innerHTML = content;
          }
        }
      } else if (content.delta) {
        this.quill.setContents(content.delta);
      }
      this.updateContent();
      this.updateStats();
    },

    /**
     * 检测图片选择
     */
    checkImageSelection() {
      try {
        if (!this.$refs.quillEditor) return
        
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) return
        
        const selection = quill.getSelection()
        if (!selection) {
          this.selectedImage = null
          return
        }
        
        // 获取选中位置的内容
        const [leaf] = quill.getLeaf(selection.index)
        
        // 检查是否是图片
        if (leaf && leaf.domNode && leaf.domNode.tagName === 'IMG') {
          this.selectedImage = leaf.domNode
        } else {
          // 检查选中范围内是否包含图片
          const contents = quill.getContents(selection.index, selection.length)
          let hasImage = false
          
          contents.ops.forEach(op => {
            if (op.insert && op.insert.image) {
              hasImage = true
            }
          })
          
          if (hasImage) {
            // 查找实际的图片元素
            const editorElement = quill.root
            const images = editorElement.querySelectorAll('img')
            
            for (let img of images) {
              // 从 DOM 元素获取对应的 blot 对象
              const blot = quill.constructor.find(img)
              if (blot) {
                const imgIndex = quill.getIndex(blot)
                if (imgIndex >= selection.index && imgIndex < selection.index + selection.length) {
                  this.selectedImage = img
                  break
                }
              }
            }
          } else {
            this.selectedImage = null
          }
        }
      } catch (error) {
        // 检测图片选择时出错
        this.selectedImage = null
      }
    },

    /**
     * 对齐选中的图片
     */
    alignSelectedImage(alignment) {
      if (!this.selectedImage) {
        this.$message.warning('请先选中一张图片')
        return
      }
      
      try {
        const img = this.selectedImage

        
        // 获取Quill实例
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) {
          // 无法获取Quill实例
          return
        }

        
        // 清除之前的对齐样式和类
        img.style.display = ''
        img.style.marginLeft = ''
        img.style.marginRight = ''
        img.style.textAlign = ''
        img.classList.remove('align-left', 'align-center', 'align-right')
        

        
        // 应用新的对齐样式
        switch (alignment) {
          case 'left':
            img.style.setProperty('display', 'block', 'important')
            img.style.setProperty('margin-left', '0', 'important')
            img.style.setProperty('margin-right', 'auto', 'important')
            img.classList.add('align-left')
            break
          case 'center':
            img.style.setProperty('display', 'block', 'important')
            img.style.setProperty('margin-left', 'auto', 'important')
            img.style.setProperty('margin-right', 'auto', 'important')
            img.classList.add('align-center')
            break
          case 'right':
            img.style.setProperty('display', 'block', 'important')
            img.style.setProperty('margin-left', 'auto', 'important')
            img.style.setProperty('margin-right', '0', 'important')
            img.classList.add('align-right')
            break
        }
        

        
        // 强制重新渲染
        img.style.visibility = 'hidden'
        setTimeout(() => {
          img.style.visibility = 'visible'
        }, 10)
        
        // 触发编辑器内容变化事件
        quill.root.dispatchEvent(new Event('input', { bubbles: true }))
        
        this.$message.success(`图片已${alignment === 'left' ? '居左' : alignment === 'center' ? '居中' : '居右'}对齐`)
      } catch (error) {
        // 对齐图片时出错
        this.$message.error('对齐图片失败')
      }
    },

    /**
     * 缩放选中的图片
     */
    scaleSelectedImage(factor) {
      if (!this.selectedImage) {
        this.$message.warning('请先选中一张图片')
        return
      }
      
      try {
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) {
          this.$message.error('编辑器未初始化')
          return
        }
        
        const img = this.selectedImage

        
        // 获取图片在编辑器中的位置
        const imgBlot = quill.constructor.find(img)
        if (!imgBlot) {
          this.$message.error('无法找到图片对象')
          return
        }
        
        const imgIndex = quill.getIndex(imgBlot)
        
        // 获取当前宽度
        let currentWidth = img.style.width ? parseInt(img.style.width) : img.naturalWidth
        if (!currentWidth || currentWidth === 0) {
          currentWidth = img.offsetWidth || img.clientWidth || 300 // 默认宽度
        }
        

        
        // 计算新宽度
        let newWidth = Math.round(currentWidth * factor)
        

        
        // 限制最小和最大宽度
        const minWidth = 50
        const maxWidth = 800
        newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth))
        

        
        // 使用 Quill 的格式化 API 来设置图片宽度
        quill.setSelection(imgIndex, 1)
        
        // 使用 CSS 自定义属性设置宽度，绕过 !important 限制
        img.style.setProperty('--custom-width', newWidth + 'px')
        img.style.width = newWidth + 'px'
        img.style.height = 'auto'
        img.style.maxWidth = 'none'
        img.style.display = 'inline-block'
        
        // 强制重新渲染
        img.setAttribute('width', newWidth)
        
        // 添加一个特殊的类来确保样式生效
        img.classList.add('custom-sized')
        

        
        // 存储原始尺寸信息（用于重置）
        if (!img.dataset.originalWidth) {
          img.dataset.originalWidth = img.naturalWidth || currentWidth
        }
        
        // 触发编辑器内容变化事件
        quill.root.dispatchEvent(new Event('input', { bubbles: true }))
        
        this.$message.success(`图片已${factor > 1 ? '放大' : '缩小'}到 ${newWidth}px`)
      } catch (error) {
        // 缩放图片时出错
        this.$message.error('缩放图片失败')
      }
    },

    /**
     * 重置选中图片的大小
     */
    resetSelectedImageSize() {
      if (!this.selectedImage) {
        this.$message.warning('请先选中一张图片')
        return
      }
      
      try {
        const img = this.selectedImage
        
        // 重置尺寸
        img.style.width = ''
        img.style.height = ''
        img.style.removeProperty('--custom-width')
        img.classList.remove('custom-sized')
        img.removeAttribute('width')
        
        // 清除对齐样式
        img.style.display = ''
        img.style.marginLeft = ''
        img.style.marginRight = ''
        img.classList.remove('align-left', 'align-center', 'align-right')
        
        // 清除存储的原始尺寸信息
        delete img.dataset.originalWidth
        
        this.$message.success('图片大小和对齐已重置')
      } catch (error) {
        // 重置图片时出错
        this.$message.error('重置图片失败')
      }
    },

    /**
     * 删除选中的图片
     */
    deleteSelectedImage() {
      if (!this.selectedImage) {
        this.$message.warning('请先选中一张图片')
        return
      }
      
      this.$confirm('确定要删除这张图片吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          const quill = this.$refs.quillEditor.getQuill()
          if (!quill) return
          
          // 从 DOM 元素获取对应的 blot 对象
          const blot = quill.constructor.find(this.selectedImage)
          if (!blot) {
            this.$message.error('无法找到图片对象')
            return
          }
          
          // 找到图片在编辑器中的位置
          const imgIndex = quill.getIndex(blot)
          
          // 删除图片
          quill.deleteText(imgIndex, 1)
          
          // 清除选中状态
          this.selectedImage = null
          
          this.$message.success('图片已删除')
        } catch (error) {
          // 删除图片时出错
          this.$message.error('删除图片失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    /**
     * 跳出代码块 - 通过Ctrl+Enter快捷键触发
     */
    exitCodeBlock() {
      try {
        if (!this.$refs.quillEditor) {
          return
        }
        
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) {
          return
        }
        
        const selection = quill.getSelection()
        if (!selection) {
          return
        }
        
        // 检查当前位置是否在代码块中
        const format = quill.getFormat(selection.index)
        if (format['code-block']) {
          // 找到代码块的结束位置
          let endIndex = selection.index
          const length = quill.getLength()
          
          // 向后查找代码块的结束位置
          for (let i = selection.index; i < length; i++) {
            const currentFormat = quill.getFormat(i, 1)
            if (!currentFormat['code-block']) {
              endIndex = i
              break
            }
            endIndex = i + 1
          }
          
          // 在代码块后插入两个换行符，确保有足够的空间
          quill.insertText(endIndex, '\n\n', 'user')
          
          // 确保新插入的段落不是代码块格式
          quill.removeFormat(endIndex + 1, 2, 'user')
          
          // 将光标移动到新段落
          quill.setSelection(endIndex + 2, 0, 'user')
          
          this.$message.success('已跳出代码块')
        } else {
          this.$message.info('当前光标不在代码块中')
        }
      } catch (error) {
        console.error('跳出代码块时出错:', error)
        this.$message.error('跳出代码块失败')
      }
    },

    /**
     * 处理BackSpace键，防止代码块样式丢失
     */
    handleBackspaceInEditor(e) {
      try {
        if (!this.$refs.quillEditor) {
          return
        }
        
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) {
          return
        }
        
        const selection = quill.getSelection()
        if (!selection || selection.length > 0) {
          return // 如果有选中文本，使用默认行为
        }
        
        const currentIndex = selection.index
        if (currentIndex === 0) {
          return // 在文档开头，使用默认行为
        }
        
        // 保存退格前的所有代码块样式信息
        const codeBlocksBeforeBackspace = this.getAllCodeBlocksWithStyles()
        
        // 延迟处理，确保退格操作完成后再检查和修复样式
        setTimeout(() => {
          this.restoreCodeBlockStyles(codeBlocksBeforeBackspace)
        }, 50)
        
      } catch (error) {
        console.error('处理BackSpace键时出错:', error)
      }
    },

    /**
     * 获取指定位置的代码块元素
     */
    getCodeBlockElementAt(index) {
      try {
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) return null
        
        const [leaf] = quill.getLeaf(index)
        if (leaf && leaf.domNode) {
          // 向上查找代码块元素
          let element = leaf.domNode
          while (element && element !== quill.root) {
            if (element.classList && (element.classList.contains('ql-syntax') || element.classList.contains('ql-code-block'))) {
              return element
            }
            element = element.parentElement
          }
        }
        return null
      } catch (error) {
        return null
      }
    },

    /**
     * 重新应用代码块样式
     */
    reapplyCodeBlockStyle(startIndex, endIndex, theme) {
      try {
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill) return
        
        // 找到对应的代码块元素并重新应用样式
        const codeBlockElement = this.getCodeBlockElementAt(startIndex)
        if (codeBlockElement && theme !== 'default') {
          this.applyStyleToCodeBlock(codeBlockElement, theme)
        }
      } catch (error) {
        console.error('重新应用代码块样式时出错:', error)
      }
    },

    /**
     * 获取所有代码块及其样式信息
     */
    getAllCodeBlocksWithStyles() {
      try {
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill || !quill.root) return []
        
        const codeBlocks = quill.root.querySelectorAll('.ql-syntax, .ql-code-block')
        const codeBlocksInfo = []
        
        codeBlocks.forEach((block, index) => {
          const theme = block.getAttribute('data-theme') || 'default'
          const classList = Array.from(block.classList)
          const textContent = block.textContent || ''
          
          codeBlocksInfo.push({
            index,
            theme,
            classList,
            textContent,
            element: block
          })
        })
        
        return codeBlocksInfo
      } catch (error) {
        console.error('获取代码块样式信息时出错:', error)
        return []
      }
    },

    /**
     * 恢复代码块样式
     */
    restoreCodeBlockStyles(savedCodeBlocks) {
      try {
        const quill = this.$refs.quillEditor.getQuill()
        if (!quill || !quill.root || !savedCodeBlocks.length) return
        
        // 获取当前的代码块
        const currentCodeBlocks = quill.root.querySelectorAll('.ql-syntax, .ql-code-block')
        
        // 为每个当前代码块匹配并恢复样式
        currentCodeBlocks.forEach((currentBlock, index) => {
          // 尝试通过文本内容匹配原来的代码块
          const currentText = currentBlock.textContent || ''
          
          // 首先尝试按索引匹配
          let matchedSavedBlock = savedCodeBlocks[index]
          
          // 如果索引匹配失败，尝试通过文本内容匹配
          if (!matchedSavedBlock || !currentText.includes(matchedSavedBlock.textContent.substring(0, 20))) {
            matchedSavedBlock = savedCodeBlocks.find(saved => {
              const savedText = saved.textContent || ''
              return savedText && currentText.includes(savedText.substring(0, 20))
            })
          }
          
          // 如果找到匹配的代码块，恢复其样式
          if (matchedSavedBlock && matchedSavedBlock.theme) {
            this.applyStyleToCodeBlock(currentBlock, matchedSavedBlock.theme)
          }
        })
        
      } catch (error) {
        console.error('恢复代码块样式时出错:', error)
      }
    }
  }
}
</script>

<style scoped>
.quill-editor-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.editor-header h3 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.editor-actions {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

/* 背景颜色选择器样式 */
.background-color-selector {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker-wrapper label {
  font-size: 12px;
  color: #666;
  margin: 0;
  white-space: nowrap;
}

.editor-body {
  min-height: 400px;
  margin-bottom: 20px;
}

.quill-editor {
  /* 高度通过内联样式动态设置 */
}

.markdown-editor-mode {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 400px;
}

.markdown-textarea {
  height: 400px;
}

.markdown-textarea :deep(.el-textarea__inner) {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  border: none;
  box-shadow: none;
  padding: 15px;
}

.preview-mode {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 400px;
}

.preview-content {
  padding: 20px;
  line-height: 1.6;
  font-size: 14px;
  color: #303133;
}

.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #409eff;
}

.preview-content p {
  margin-bottom: 10px;
}

.preview-content ul,
.preview-content ol {
  margin-bottom: 10px;
  padding-left: 20px;
}

.preview-content blockquote {
  margin: 15px 0;
  padding: 10px 15px;
  background: #f5f7fa;
  border-left: 4px solid #409eff;
  color: #606266;
}

.preview-content code {
  background: #f5f7fa;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

.preview-content pre {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 10px 0;
}

/* Typora风格表格样式 */
.preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
  border: none;
  box-shadow: none;
}

.preview-content table th,
.preview-content table td {
  border: none;
  border-bottom: 1px solid #e1e4e8;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.preview-content table th {
  background-color: transparent;
  font-weight: 600;
  color: #24292e;
  border-bottom: 2px solid #d0d7de;
  padding-bottom: 8px;
}

.preview-content table td {
  color: #24292e;
}

.preview-content table tr {
  background-color: transparent;
  border: none;
}

.preview-content table tr:hover {
  background-color: #f6f8fa;
}

.preview-content table thead tr {
  background-color: transparent;
}

.preview-content table tbody tr:last-child td {
  border-bottom: none;
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e4e7ed;
  font-size: 12px;
  color: #909399;
}

.editor-stats {
  display: flex;
  gap: 20px;
}

.save-result {
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.save-result h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.save-result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}

/* Quill编辑器样式覆盖 */
:deep(.ql-toolbar) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: none;
  /* 固定工具栏，不跟随滚动 */
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: block !important;
  visibility: visible !important;
}

:deep(.ql-container) {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: none;
  display: block !important;
  visibility: visible !important;
  min-height: 300px;
}

:deep(.ql-editor) {
  min-height: 300px;
  background-color: #fff;
  display: block !important;
  visibility: visible !important;
}

/* 单栏模式样式 */
.single-view {
  display: block;
  width: 100%;
}

.single-view .editor-pane {
  width: 100%;
  height: 500px;
}

.single-view .quill-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 高度通过内联样式设置，避免与动态高度冲突 */
}

.single-view .quill-editor :deep(.ql-container) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background-color: #fff;
}

.single-view .quill-editor :deep(.ql-editor) {
  flex: 1;
  min-height: 300px;
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  background-color: #fff;
  border: none;
}

/* 分栏模式样式（保留以备后用） */
.split-view {
  display: flex;
  gap: 20px;
  height: 500px;
}

.editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.preview-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.editor-pane .editor-mode {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pane-header {
  background: #f5f7fa;
  padding: 8px 15px;
  border-bottom: 1px solid #e4e7ed;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.split-view .markdown-editor-mode,
.split-view .editor-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.split-view .markdown-textarea {
  flex: 1;
  border: none;
  border-radius: 0;
}

.split-view .markdown-textarea :deep(.el-textarea__inner) {
  border: none;
  border-radius: 0;
  resize: none;
  height: 100% !important;
}

.split-view .quill-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.split-view .quill-editor :deep(.ql-toolbar) {
  border: none;
  border-bottom: 1px solid #e4e7ed;
}

.split-view .quill-editor :deep(.ql-container) {
  flex: 1;
  border: none;
  display: flex;
  flex-direction: column;
}

.split-view .quill-editor :deep(.ql-editor) {
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.preview-pane .preview-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  background: #fff;
}



/* 分栏模式下的Typora风格表格样式 */
.preview-pane .preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
  border: none;
  box-shadow: none;
}

.preview-pane .preview-content table th,
.preview-pane .preview-content table td {
  border: none;
  border-bottom: 1px solid #e1e4e8;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.preview-pane .preview-content table th {
  background-color: transparent;
  font-weight: 600;
  color: #24292e;
  border-bottom: 2px solid #d0d7de;
  padding-bottom: 8px;
}

.preview-pane .preview-content table td {
  color: #24292e;
}

.preview-pane .preview-content table tr {
  background-color: transparent;
  border: none;
}

.preview-pane .preview-content table tr:hover {
  background-color: #f6f8fa;
}

.preview-pane .preview-content table thead tr {
  background-color: transparent;
}

.preview-pane .preview-content table tbody tr:last-child td {
  border-bottom: none;
}

:deep(.ql-editor) {
  font-size: 14px;
  line-height: 1.6;
}

:deep(.ql-editor.ql-blank::before) {
  color: #c0c4cc;
  font-style: normal;
}

/* 图片样式统一 - 适配小程序和iPhone 12尺寸 */
:deep(.ql-editor img) {
  max-width: 100%;
  height: auto !important;
  max-height: 400px !important;
  border-radius: 8px !important;
  margin: 12px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  object-fit: contain !important;
  /* 针对小程序优化 */
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* 允许手动设置图片宽度 */
:deep(.ql-editor img.custom-sized) {
  width: var(--custom-width) !important;
  max-width: none !important;
}

/* 图片对齐样式 */
:deep(.ql-editor img.align-left) {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

:deep(.ql-editor img.align-center) {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:deep(.ql-editor img.align-right) {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

:deep(.ql-editor img[style*="width"]) {
  width: var(--custom-width) !important;
}

/* 预览模式下的图片样式 */
.preview-content img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  max-height: 400px !important;
  border-radius: 8px !important;
  margin: 12px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  object-fit: contain !important;
}

/* 自定义滚动条样式 */
.split-view .quill-editor :deep(.ql-editor) {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
</style>

<style>
/* 代码块样式 - 默认样式 */
.ql-editor .ql-syntax.code-default,
.ql-editor .ql-code-block.code-default {
  background-color: #f8f8f8 !important;
  color: #333333 !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 代码块样式 - 暗色主题 */
.ql-editor .ql-syntax.code-dark,
.ql-editor .ql-code-block.code-dark {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 代码块样式 - GitHub风格 */
.ql-editor .ql-syntax.code-github,
.ql-editor .ql-code-block.code-github {
  background-color: #f6f8fa !important;
  color: #24292e !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* 代码块样式 - VS Code风格 */
.ql-editor .ql-syntax.code-vscode,
.ql-editor .ql-code-block.code-vscode {
  background-color: #1e1e1e !important;
  color: #d4d4d4 !important;
  border-left: 3px solid #007acc !important;
  border-radius: 4px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 代码块样式 - 终端风格 */
.ql-editor .ql-syntax.code-terminal,
.ql-editor .ql-code-block.code-terminal {
  background-color: #0c0c0c !important;
  color: #00ff41 !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  text-shadow: 0 0 5px #00ff41 !important;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1) !important;
}

/* 代码块样式 - 简约风格 */
.ql-editor .ql-syntax.code-minimal,
.ql-editor .ql-code-block.code-minimal {
  background-color: #fafafa !important;
  color: #666666 !important;
  border: none !important;
  border-left: 4px solid #ddd !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Monaco', 'Menlo', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: none !important;
}

/* 代码块样式 - 彩色边框 */
.ql-editor .ql-syntax.code-colorful,
.ql-editor .ql-code-block.code-colorful {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 3px solid transparent !important;
  border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7) 1 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Fira Code', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 代码块样式 - 渐变背景 */
.ql-editor .ql-syntax.code-gradient,
.ql-editor .ql-code-block.code-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

/* 代码块样式 - 提示信息 */
.ql-editor .ql-syntax.code-tip,
.ql-editor .ql-code-block.code-tip {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #0c4a6e !important;
  border: 1px solid #0ea5e9 !important;
  border-left: 4px solid #0ea5e9 !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15), 0 2px 4px rgba(14, 165, 233, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-tip::before,
.ql-editor .ql-code-block.code-tip::before {
  content: "💡" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3)) !important;
}

.ql-editor .ql-syntax.code-tip::after,
.ql-editor .ql-code-block.code-tip::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0ea5e9, #06b6d4, #0ea5e9) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 警告提醒 */
.ql-editor .ql-syntax.code-warning,
.ql-editor .ql-code-block.code-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
  border: 1px solid #f59e0b !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15), 0 2px 4px rgba(245, 158, 11, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-warning::before,
.ql-editor .ql-code-block.code-warning::before {
  content: "⚠️" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3)) !important;
}

.ql-editor .ql-syntax.code-warning::after,
.ql-editor .ql-code-block.code-warning::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 重要信息 */
.ql-editor .ql-syntax.code-info,
.ql-editor .ql-code-block.code-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1e40af !important;
  border: 1px solid #3b82f6 !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 4px rgba(59, 130, 246, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-info::before,
.ql-editor .ql-code-block.code-info::before {
  content: "ℹ️" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3)) !important;
}

.ql-editor .ql-syntax.code-info::after,
.ql-editor .ql-code-block.code-info::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 成功提示 */
.ql-editor .ql-syntax.code-success,
.ql-editor .ql-code-block.code-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  color: #166534 !important;
  border: 1px solid #22c55e !important;
  border-left: 4px solid #22c55e !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15), 0 2px 4px rgba(34, 197, 94, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-success::before,
.ql-editor .ql-code-block.code-success::before {
  content: "✅" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3)) !important;
}

.ql-editor .ql-syntax.code-success::after,
.ql-editor .ql-code-block.code-success::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #22c55e, #4ade80, #22c55e) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 错误提示 */
.ql-editor .ql-syntax.code-error,
.ql-editor .ql-code-block.code-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%) !important;
  color: #991b1b !important;
  border: 1px solid #ef4444 !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15), 0 2px 4px rgba(239, 68, 68, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-error::before,
.ql-editor .ql-code-block.code-error::before {
  content: "❌" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3)) !important;
}

.ql-editor .ql-syntax.code-error::after,
.ql-editor .ql-code-block.code-error::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ef4444, #f87171, #ef4444) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 笔记提示 */
.ql-editor .ql-syntax.code-note,
.ql-editor .ql-code-block.code-note {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  color: #7c2d12 !important;
  border: 1px solid #a855f7 !important;
  border-left: 4px solid #a855f7 !important;
  border-radius: 8px !important;
  padding: 18px 20px 18px 50px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15), 0 2px 4px rgba(168, 85, 247, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-note::before,
.ql-editor .ql-code-block.code-note::before {
  content: "📝" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3)) !important;
}

.ql-editor .ql-syntax.code-note::after,
.ql-editor .ql-code-block.code-note::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #a855f7, #c084fc, #a855f7) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 活力橙红 */
.ql-editor .ql-syntax.code-fire,
.ql-editor .ql-code-block.code-fire {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%) !important;
  color: #c53030 !important;
  border: 1px solid #fc8181 !important;
  border-left: 4px solid #e53e3e !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.15), 0 2px 4px rgba(229, 62, 62, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-fire::before,
.ql-editor .ql-code-block.code-fire::before {
  content: "🔥" !important;
  position: absolute !important;
  top: -8px !important;
  right: 16px !important;
  font-size: 20px !important;
  background: linear-gradient(135deg, #e53e3e, #fc8181) !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3) !important;
}

.ql-editor .ql-syntax.code-fire::after,
.ql-editor .ql-code-block.code-fire::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #e53e3e, #fc8181, #e53e3e) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 深海蓝调 */
.ql-editor .ql-syntax.code-ocean,
.ql-editor .ql-code-block.code-ocean {
  background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%) !important;
  color: #2c5282 !important;
  border: 1px solid #4299e1 !important;
  border-left: 4px solid #3182ce !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'JetBrains Mono', 'Source Code Pro', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15), 0 2px 4px rgba(49, 130, 206, 0.1) !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

.ql-editor .ql-syntax.code-ocean::before,
.ql-editor .ql-code-block.code-ocean::before {
  content: "🌊" !important;
  position: absolute !important;
  top: -8px !important;
  right: 16px !important;
  font-size: 20px !important;
  background: linear-gradient(135deg, #3182ce, #4299e1) !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3) !important;
}

.ql-editor .ql-syntax.code-ocean::after,
.ql-editor .ql-code-block.code-ocean::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #3182ce, #4299e1, #3182ce) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 代码块样式 - 樱花主题 */
.ql-editor .ql-syntax.code-sakura,
.ql-editor .ql-code-block.code-sakura {
  background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 50%, #ffd1e8 100%) !important;
  color: #8b5a6b !important;
  border: 2px solid #ff69b4 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Georgia', serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(255, 105, 180, 0.2) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-sakura::after,
.ql-editor .ql-code-block.code-sakura::after {
  content: "🌸" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  opacity: 0.7 !important;
}

/* 代码块样式 - 夜空主题 */
.ql-editor .ql-syntax.code-night,
.ql-editor .ql-code-block.code-night {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important;
  color: #e94560 !important;
  border: 1px solid #533483 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(83, 52, 131, 0.3) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-night::before,
.ql-editor .ql-code-block.code-night::before {
  content: "✨" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 16px !important;
  animation: twinkle 2s ease-in-out infinite alternate !important;
}

@keyframes twinkle {
  0% { opacity: 0.5 !important; }
  100% { opacity: 1 !important; }
}

/* 代码块样式 - 阳光主题 */
.ql-editor .ql-syntax.code-sunshine,
.ql-editor .ql-code-block.code-sunshine {
  background: linear-gradient(135deg, #fff9c4 0%, #fff176 50%, #ffeb3b 100%) !important;
  color: #f57f17 !important;
  border: 2px solid #ffc107 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Comic Sans MS', cursive !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-sunshine::before,
.ql-editor .ql-code-block.code-sunshine::before {
  content: "☀️" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  animation: rotate 4s linear infinite !important;
}

@keyframes rotate {
  0% { transform: rotate(0deg) !important; }
  100% { transform: rotate(360deg) !important; }
}

/* 代码块样式 - 森林主题 */
.ql-editor .ql-syntax.code-forest,
.ql-editor .ql-code-block.code-forest {
  background: linear-gradient(135deg, #2d5016 0%, #3e6b1f 50%, #4caf50 100%) !important;
  color: #c8e6c9 !important;
  border: 2px solid #388e3c !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(56, 142, 60, 0.3) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-forest::after,
.ql-editor .ql-code-block.code-forest::after {
  content: "🌲" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  opacity: 0.8 !important;
}

/* 代码块样式 - 钻石主题 */
.ql-editor .ql-syntax.code-diamond,
.ql-editor .ql-code-block.code-diamond {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 50%, #e6e6fa 100%) !important;
  color: #4b0082 !important;
  border: 3px solid transparent !important;
  border-image: linear-gradient(45deg, #ff69b4, #00bfff, #ff1493, #1e90ff) 1 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Times New Roman', serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(75, 0, 130, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-diamond::before,
.ql-editor .ql-code-block.code-diamond::before {
  content: "💎" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  animation: sparkle 3s ease-in-out infinite !important;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg) !important; opacity: 0.8 !important; }
  50% { transform: scale(1.2) rotate(180deg) !important; opacity: 1 !important; }
}

/* 代码块样式 - 彩虹主题 */
.ql-editor .ql-syntax.code-rainbow,
.ql-editor .ql-code-block.code-rainbow {
  background: linear-gradient(135deg, #ff0000 0%, #ff8000 16.66%, #ffff00 33.33%, #00ff00 50%, #0080ff 66.66%, #8000ff 83.33%, #ff0080 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Arial Black', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3) !important;
  animation: rainbowShift 5s linear infinite !important;
}

@keyframes rainbowShift {
  0% { filter: hue-rotate(0deg) !important; }
  100% { filter: hue-rotate(360deg) !important; }
}

/* 代码块样式 - 霓虹主题 */
.ql-editor .ql-syntax.code-neon,
.ql-editor .ql-code-block.code-neon {
  background-color: #0a0a0a !important;
  color: #00ffff !important;
  border: 2px solid #00ffff !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff !important;
  box-shadow: 0 0 20px #00ffff, inset 0 0 20px rgba(0, 255, 255, 0.1) !important;
  animation: neonPulse 2s ease-in-out infinite alternate !important;
}

@keyframes neonPulse {
  0% { 
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff !important;
    box-shadow: 0 0 10px #00ffff, inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
  }
  100% { 
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff !important;
    box-shadow: 0 0 20px #00ffff, inset 0 0 20px rgba(0, 255, 255, 0.2) !important;
  }
}

/* 代码块样式 - 冰川主题 */
.ql-editor .ql-syntax.code-glacier,
.ql-editor .ql-code-block.code-glacier {
  background: linear-gradient(135deg, #e0f6ff 0%, #b3e5fc 50%, #81d4fa 100%) !important;
  color: #01579b !important;
  border: 2px solid #0288d1 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(2, 136, 209, 0.2) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-glacier::before,
.ql-editor .ql-code-block.code-glacier::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%) !important;
  animation: iceShimmer 4s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes iceShimmer {
  0% { transform: translateX(-100%) !important; }
  100% { transform: translateX(100%) !important; }
}

/* 代码块样式 - 日出主题 */
.ql-editor .ql-syntax.code-sunrise,
.ql-editor .ql-code-block.code-sunrise {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
  color: #8b0000 !important;
  border: 2px solid #ff6b6b !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-sunrise::after,
.ql-editor .ql-code-block.code-sunrise::after {
  content: "🌅" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  opacity: 0.8 !important;
}

/* 代码块样式 - 星空主题 */
.ql-editor .ql-syntax.code-starry,
.ql-editor .ql-code-block.code-starry {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4a4a6a !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 20px rgba(26, 26, 46, 0.5) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-starry::before,
.ql-editor .ql-code-block.code-starry::before {
  content: "⭐" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 16px !important;
  animation: starTwinkle 3s ease-in-out infinite !important;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.3 !important; transform: scale(0.8) !important; }
  50% { opacity: 1 !important; transform: scale(1.2) !important; }
}

/* 代码块样式 - 复古主题 */
.ql-editor .ql-syntax.code-vintage,
.ql-editor .ql-code-block.code-vintage {
  background: linear-gradient(135deg, #f4f1de 0%, #e07a5f 50%, #3d405b 100%) !important;
  color: #2d3436 !important;
  border: 3px solid #81ecec !important;
  border-radius: 0 !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 8px 8px 0px #2d3436, 4px 4px 0px #636e72 !important;
  position: relative !important;
  transform: rotate(-0.5deg) !important;
}

.ql-editor .ql-syntax.code-vintage::before,
.ql-editor .ql-code-block.code-vintage::before {
  content: "🎭" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  opacity: 0.7 !important;
}

/* 代码块样式 - 机器人主题 */
.ql-editor .ql-syntax.code-robot,
.ql-editor .ql-code-block.code-robot {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%) !important;
  color: #00ff00 !important;
  border: 2px solid #00ff00 !important;
  border-radius: 4px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  text-shadow: 0 0 5px #00ff00 !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3), inset 0 0 20px rgba(0, 255, 0, 0.1) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-robot::before,
.ql-editor .ql-code-block.code-robot::before {
  content: "🤖" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  animation: robotBlink 2s step-end infinite !important;
}

@keyframes robotBlink {
  0%, 50% { opacity: 1 !important; }
  51%, 100% { opacity: 0.3 !important; }
}

/* 代码块样式 - 书本主题 */
.ql-editor .ql-syntax.code-book,
.ql-editor .ql-code-block.code-book {
  background: linear-gradient(135deg, #fef7e0 0%, #f6e6cc 50%, #e8d5b7 100%) !important;
  color: #5d4037 !important;
  border-left: 8px solid #8d6e63 !important;
  border-top: 2px solid #bcaaa4 !important;
  border-right: 2px solid #bcaaa4 !important;
  border-bottom: 2px solid #bcaaa4 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 20px 16px 16px 24px !important;
  margin: 16px 0 !important;
  font-family: 'Georgia', serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 2px 2px 8px rgba(93, 64, 55, 0.2) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-book::before,
.ql-editor .ql-code-block.code-book::before {
  content: "📚" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 18px !important;
  opacity: 0.7 !important;
}

.ql-editor .ql-syntax.code-book::after,
.ql-editor .ql-code-block.code-book::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 8px !important;
  background: linear-gradient(180deg, #8d6e63 0%, #6d4c41 100%) !important;
  border-radius: 0 !important;
}

/* 代码块样式 - 焦点主题 */
.ql-editor .ql-syntax.code-focus,
.ql-editor .ql-code-block.code-focus {
  background: radial-gradient(circle at center, #ffffff 0%, #f8f9fa 70%, #e9ecef 100%) !important;
  color: #212529 !important;
  border: 3px solid #007bff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'SF Mono', 'Monaco', monospace !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25), 0 4px 20px rgba(0, 123, 255, 0.15) !important;
  position: relative !important;
  transform: scale(1.02) !important;
}

.ql-editor .ql-syntax.code-focus::before,
.ql-editor .ql-code-block.code-focus::before {
  content: "🎯" !important;
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 20px !important;
  opacity: 0.8 !important;
}

.ql-editor .ql-syntax.code-focus::after,
.ql-editor .ql-code-block.code-focus::after {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: -3px !important;
  right: -3px !important;
  bottom: -3px !important;
  border: 1px solid rgba(0, 123, 255, 0.3) !important;
  border-radius: 15px !important;
  animation: focusPulse 3s ease-in-out infinite !important;
}

@keyframes focusPulse {
  0%, 100% { 
    border-color: rgba(0, 123, 255, 0.3) !important;
    transform: scale(1) !important;
  }
  50% { 
    border-color: rgba(0, 123, 255, 0.6) !important;
    transform: scale(1.01) !important;
  }
}

/* 通用代码块基础样式 - 只在没有特定样式类时生效 */
.ql-editor .ql-syntax:not([class*="code-"]),
.ql-editor .ql-code-block:not([class*="code-"]) {
  background-color: #f8f8f8 !important;
  color: #333333 !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* 全局预览区HTML元素样式 */
.preview-pane .preview-content h1,
.preview-pane .preview-content h2,
.preview-pane .preview-content h3,
.preview-pane .preview-content h4,
.preview-pane .preview-content h5,
.preview-pane .preview-content h6 {
  margin: 16px 0 8px 0 !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #24292e !important;
}

.preview-pane .preview-content h1 { font-size: 2em !important; }
.preview-pane .preview-content h2 { font-size: 1.5em !important; }
.preview-pane .preview-content h3 { font-size: 1.25em !important; }
.preview-pane .preview-content h4 { font-size: 1em !important; }
.preview-pane .preview-content h5 { font-size: 0.875em !important; }
.preview-pane .preview-content h6 { font-size: 0.85em !important; }

.preview-pane .preview-content p {
  margin: 8px 0 !important;
  line-height: 1.6 !important;
  color: #24292e !important;
}

.preview-pane .preview-content ul,
.preview-pane .preview-content ol {
  margin: 8px 0 !important;
  padding-left: 24px !important;
  color: #24292e !important;
}

.preview-pane .preview-content li {
  margin: 4px 0 !important;
  line-height: 1.6 !important;
  color: #24292e !important;
}

.preview-pane .preview-content blockquote {
  margin: 16px 0 !important;
  padding: 8px 16px !important;
  border-left: 4px solid #dfe2e5 !important;
  background-color: #f6f8fa !important;
  color: #6a737d !important;
  border-radius: 3px !important;
}

.preview-pane .preview-content pre,
.preview-pane .preview-content .ql-code-block {
  background-color: #2d3748 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  overflow-x: auto !important;
  margin: 16px 0 !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 85% !important;
  line-height: 1.45 !important;
  color: #e2e8f0 !important;
}

.preview-pane .preview-content code {
  background-color: rgba(175, 184, 193, 0.2) !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 85% !important;
  color: #d73a49 !important;
}

.preview-pane .preview-content strong {
  font-weight: 600 !important;
  color: #24292e !important;
}

.preview-pane .preview-content em {
  font-style: italic !important;
  color: #24292e !important;
}

.preview-pane .preview-content u {
  text-decoration: underline !important;
  color: #24292e !important;
}

/* 图片编辑面板样式 */
.image-edit-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #409eff;
  border: 2px solid #409eff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.3);
  z-index: 1000;
  white-space: nowrap;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.image-edit-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-edit-panel .el-button {
  padding: 6px 8px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.image-edit-panel .el-button:hover {
  background: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

.image-edit-panel .el-button-group {
  display: inline-flex;
}

.image-edit-panel .el-button.el-button--danger {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

.image-edit-panel .el-button.el-button--danger:hover {
  background: #f78989;
  border-color: #f78989;
}

/* 选中图片的高亮样式 */
:deep(.ql-editor img:hover) {
  outline: 2px solid #409eff;
  outline-offset: 2px;
  cursor: pointer;
}

:deep(.ql-editor img.selected) {
  outline: 2px solid #409eff;
  outline-offset: 2px;
}
</style>

<style>
/* 代码块语法高亮增强 */
.ql-editor .ql-syntax {
  position: relative;
}

.ql-editor .ql-syntax::before {
  content: 'Code';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 12px;
  opacity: 0.6;
  font-family: sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 自定义下拉菜单样式 */
.custom-select {
  position: relative;
  display: inline-block;
}

.theme-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 160px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1001;
  max-height: 200px;
  overflow-y: auto;
}

.theme-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: background-color 0.3s;
}

.theme-option:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.theme-option:first-child {
  border-radius: 4px 4px 0 0;
}

.theme-option:last-child {
  border-radius: 0 0 4px 4px;
}

/* 全局滚动条样式 - 针对Quill编辑器和预览区 */
.ql-editor::-webkit-scrollbar,
.preview-content::-webkit-scrollbar {
  width: 8px;
}

.ql-editor::-webkit-scrollbar-track,
.preview-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.ql-editor::-webkit-scrollbar-thumb,
.preview-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.ql-editor::-webkit-scrollbar-thumb:hover,
.preview-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 代码块样式 - 现代简约 */
.ql-editor .ql-syntax.code-modern,
.ql-editor .ql-code-block.code-modern {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #64748b !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-modern::before,
.ql-editor .ql-code-block.code-modern::before {
  content: "⚡" !important;
  position: absolute !important;
  top: -8px !important;
  right: 16px !important;
  font-size: 18px !important;
  background: #64748b !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3) !important;
}

/* 代码块样式 - 高端商务 */
.ql-editor .ql-syntax.code-business,
.ql-editor .ql-code-block.code-business {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  border-left: 4px solid #0ea5e9 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-business::before,
.ql-editor .ql-code-block.code-business::before {
  content: "💼" !important;
  position: absolute !important;
  top: -8px !important;
  right: 16px !important;
  font-size: 18px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

/* 代码块样式 - 学术风格 */
.ql-editor .ql-syntax.code-academic,
.ql-editor .ql-code-block.code-academic {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  color: #92400e !important;
  border: 1px solid #d97706 !important;
  border-left: 4px solid #b45309 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.15), 0 2px 4px rgba(180, 83, 9, 0.1) !important;
  position: relative !important;
}

.ql-editor .ql-syntax.code-academic::before,
.ql-editor .ql-code-block.code-academic::before {
  content: "📚" !important;
  position: absolute !important;
  top: -8px !important;
  right: 16px !important;
  font-size: 18px !important;
  background: linear-gradient(135deg, #b45309, #d97706) !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3) !important;
}
</style>